import { observer, inject } from "mobx-react";
import { useEffect } from "react";
function App(props) {
  console.log(props); // {doctorStore}
  let {
    count,
    userInfo,
    doctorList,
    increment,
    changeDoctors,
    changeUserInfo,
    getDoctors,
    getUserName,
  } = props.doctorStore;
  useEffect(() => {
    getDoctors();
  }, []);

  const deleteDoctors = (did) => {
    // get请求，参数直接拼接,如：url？key=value.
    fetch("http://127.0.0.1:80/doctor/delete", {
      method: "post",
      // post请求，必须加headers，
      headers: { "content-type": "application/json" },
      // post请求，参数必须序列化。
      body: JSON.stringify({ did: did }),
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        if (res.code === 0) {
          // alert('删除成功')
          // 调用异步的action,重新拿医生列表数据
          getDoctors();
        } else {
          alert("删除失败");
        }
      });
  };
  return (
    <div className="App">
      <h1> count: {count}</h1>
      <button onClick={increment}>increment</button>
      <hr />
      <h1>用户名： {userInfo.uname}</h1>
      <h2>项目里面使用： {getUserName}</h2>
      <button
        onClick={() => {
          changeUserInfo({ uid: 1, uname: "文庆武", usex: "男" });
        }}
      >
        changeUserInfo
      </button>
      <div>
        {doctorList.map((el) => {
          return (
            <p key={el.did}>
              {el.dname}{" "}
              <button
                type="button"
                onClick={() => {
                  deleteDoctors(el.did);
                }}
              >
                delete
              </button>
            </p>
          );
        })}
      </div>
    </div>
  );
}

export default inject(["doctorStore"])(observer(App));

// inject(['store']),把store属性，注入到UI组件（App）的props中
/* 
inject():注入提供数据的Props属性名。
 observer(组件名)：把组件变成一个响应式的组件。

 语法：inject(['props名称'])(observer(组件名))

 需要使用Store数据的组件，就像App这样，用injet('props名')(observer(组件名))
*/
